<script lang="ts" setup>
import { ref,onMounted } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import * as service from "@/api/lj_api";
import { ElNotification } from 'element-plus'
import Add from '@/components/tenement/TenementAdd.vue'
import TenementPd from '@/components/tenement/TenementPd.vue'

//表格数据
var tableData = ref([]);
//tab切换
var tabIndex = ref(1);
//新增页面
const addPage:any = ref(null);
//派单页面
const paiDan:any = ref(null);
//详细
var xiangxi = ()=>{
  if(!hoverRow.value) return;
  flag.value = false;
  addPage.value && addPage.value.huixian();
}
  //派单详细
var xiangxiTwo = ()=>{
  if(!hoverRow.value) return;
  paiDan.value && paiDan.value.phuixian();
  flag.value = !flag.value;
}
//派单
var paidan = ()=>{
  console.log('派单');
  if(!hoverRow.value) return;
  paiDan.value && paiDan.value.pshow();
  flag.value = !flag.value;
}
//获取数据
var getdata = async ()=>{
  if(tabIndex.value == 1){
    var res = await service.sixth.device_queryByPage();
    tableData.value = res.data.data;
  }else if(tabIndex.value == 2){
    var res = await service.sixth.device_queryByPage();
    tableData.value = res.data.data;
  }else{
    var res = await service.sixth.device_queryByPage();
    tableData.value = res.data.data;
  }
}
//设备列表--默认
var DeviceList = ()=> {
  tabIndex.value = 1;
  getdata();
}
//告警记录
var AlarmLog = ()=> {
  tabIndex.value = 2;
  getdata();
}
//运维记录
var operationLog = ()=>{
  tabIndex.value = 3;
  getdata();
}
//初始化
onMounted(async ()=>{getdata()})
//查询表单
var searchForm = ref({
  deviceId:'',deviceNum:'',deviceType:''
})
//查询表单约束
var searchRules = {
  deviceId:{required: true, message: 'deviceId', trigger: 'bulr'},
  deviceNum:{required: true, message: 'deviceNum', trigger: 'bulr'},
  deviceType:{required: true, message: 'deviceType', trigger: 'bulr'},
}
//点击查询
var search = async (form:any)=>{
  let res:any = await service.sixth.device_queryById({id:form.deviceId});
  if(res.status == '200' && res.data){
    ElNotification.success({message: '查询成功'});
  }else{
    ElNotification.error({message: '查询失败'});
  }
}
//重置
var reset = ()=>{
  searchForm.value={
   deviceId:'',deviceNum:'',deviceType:''
  }
  getdata();
}
//选中的id
var ids:any = ref([]);
var hoverRow = ref(null);
//单选
var currentId = ref();
var check = (select: any, row: any) => {
  currentId.value = row.deviceId;
  ids.value = select
  hoverRow.value = row;
};
//删除
var deleteRow = async ()=>{
  if(!currentId.value)return ;
  var res = await service.sixth.device_deleteById({id:currentId.value})
  currentId.value = '';
  if(res.data)getdata();
  ElNotification.success({message: '删除成功'})
}
//全选
var checkAll = (select: any) => ids.value = select;

//批量删除
var del = async () => {
  var arr:any = [];
  //逗号拼接
  ids.value.forEach((item:any)=>arr.push(item.deviceId));
  var deleteId:any = arr.join(',');
  var res = await service.sixth.device_deletefew({ids:deleteId})
  console.log(res);
  //刷新页面
   if(res.data)getdata();
   ElNotification.success({message: '删除成功'})
};
//页面隐藏显示
var flag = ref(true);
var hide = ()=>flag.value = true;
//新增
var add = async () =>{
  addPage.value && addPage.value.show();
  flag.value = !flag.value;
}  
</script>
<template>
  <div class="tenement_sixth">
    <div v-show="flag">
      <Header title="智能水电表" @del="del" @add="add" :flag="tabIndex==1?false:true"/>
    <div class="main">
      <div class="nav">
        <div class="tab">
          <span @click="DeviceList" :class="{current:tabIndex==1}">设备列表</span>
          <span @click="AlarmLog" :class="{current:tabIndex==2}">告警记录</span>
          <span @click="operationLog" :class="{current:tabIndex==3}">运维记录</span>
        </div>
        <div class="kuang">
          <el-form class="form"  :rules="searchRules"
                :model="searchForm">
            <div class="left">
                <div class="item">
                  <el-form-item label="设备名称：" prop="deviceId">
                    <el-input v-model="searchForm.deviceId" />
                  </el-form-item>
                </div>
                <div class="item">
                  <el-form-item label="设备编号：" prop="deviceNum">
                    <el-input v-model="searchForm.deviceNum" />
                  </el-form-item>
                </div>
                <div class="select">
                  <el-form-item label="运行状态：" prop="deviceType" v-show="tabIndex==1">
                    <el-select v-model="searchForm.deviceType" placeholder="请选择">
                      <el-option label="正常" value="0" />
                      <el-option label="离线" value="1" />
                      <el-option label="报警" value="2" />
                      <el-option label="禁用" value="3" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="告警类型：" prop="deviceType" v-show="tabIndex==2">
                    <el-select v-model="searchForm.deviceType" placeholder="请选择">
                      <el-option label="设备故障" value="0" />
                      <el-option label="告警事件" value="1" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="维修类型：" prop="deviceType" v-show="tabIndex==3">
                    <el-select v-model="searchForm.deviceType" placeholder="请选择">
                      <el-option label="故障检修" value="0" />
                      <el-option label="日常巡检" value="1" />
                    </el-select>
                  </el-form-item>
                </div>
            </div>
            <div class="btns">
              <el-button type="success" class="chaxun" @click="search(searchForm)">查询</el-button>
              <el-button type="info" plain @click="reset">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <Table v-show="tabIndex==1" :data="tableData" @check="check" @check-all="checkAll"
          :keys="['deviceId', 'operator', 'deviceType', 'devicePic', 'position', 'runningStatus', 'deviceNum', 'productVerson','productionTime']"
          :label="['值', '设备名称', '设备编号', '设备型号', '安装位置', '运行状态', '运行时长(天)', '最近更新时间','操作']"
          :status="['runningStatus']"
          >
          <template #runningStatus>
            <span style="color:green">正常</span> 
          </template>
          <template #btn >
            <el-button @click="xiangxi">详细</el-button>
            <el-button @click="deleteRow">删除</el-button>
          </template>
        </Table>
        <Table v-show="tabIndex==2" :data="tableData" @check="check" @check-all="checkAll"
          :keys="['deviceId', 'operator', 'deviceType', 'devicePic', 'position', 'runningStatus', 'deviceNum', 'productVerson','productionTime']"
          :label="['值', '设备名称', '设备编号', '告警位置', '告警内容', '告警类型', '处置状态', '告警时间','操作']"
          :status="['runningStatus','deviceNum']"
          >
          <template #runningStatus>
            <span style="color:green">正常</span> 
          </template>
          <template #deviceNum>
            <span style="color:red">异常</span> 
          </template>
          <template #btn >
            <el-button @click="xiangxi">详细</el-button>
            <el-button  type="danger" @click="paidan">派单</el-button>
          </template>
        </Table>
        <Table v-show="tabIndex==3" :data="tableData" @check="check" @check-all="checkAll"
          :keys="['deviceId', 'operator', 'deviceType', 'devicePic', 'position', 'runningStatus', 'deviceNum', 'productVerson','productionTime']"
          :label="['值', '设备名称', '设备编号', '巡检位置', '巡检内容', '维修类型', '巡检状态', '巡检时间','操作']"
          :status="['deviceNum']"
          >
          <template #deviceNum>
            <span style="color:green">已完成</span> 
          </template> 
          <template #btn >
            <el-button @click="xiangxiTwo">详细</el-button>
            <el-button @click="deleteRow">删除</el-button>
          </template>
        </Table>
      </div>
    </div>
    </div>
    <!-- 派单 -->
    <TenementPd ref="paiDan" @hide="hide" @getdata="getdata" :row="hoverRow"/>
    <!-- 新增 -->
    <Add ref="addPage" @hide="hide" @getdata="getdata"  :row="hoverRow"/>
  </div>
</template>
<style scoped lang="scss">
@import '@/saas/Table.scss';
@import '@/saas/DeviceManager.scss';
</style>
